<template>
  <div class="print_box">
    <div class="print_tk_box">
      <div class="close" @click="close">
        <a-icon type="close" />
      </div>
      <div class="print_btn">
        <a-button v-print="printTest" type="primary" @change="tablechange" @click="tableheig">打印</a-button>

        <a-button
          type="button"
          @click="getpdf($parent.print_data.listdata.dwmc+'-购销合同'+print_key)"
        >PDF下载</a-button>
        <!-- <a-button v-print="printTest_two"  v-if="print_key==2?true:false" type="primary">打印</a-button> -->
        <!-- <a-button v-print="printTest_three"  v-if="print_key==3?true:false" type="primary">打印</a-button> -->
      </div>

      <a-tabs :default-active-key="1" @change="callback">
        <a-tab-pane :key="1" tab="模板一"></a-tab-pane>
        <a-tab-pane :key="2" tab="模板二"></a-tab-pane>
        <a-tab-pane :key="3" tab="模板三"></a-tab-pane>
      </a-tabs>

      <div class="print_tk" v-if="print_key==1?true:false" id="printTest">
        <h2>购销合同</h2>
        <div class="print_top">
          <ul class="ul_one">
            <li style="width: 60%">
              <p>供方：{{$parent.print_data.buyerData.DWMC}}</p>
              <p>需方：{{$parent.print_data.sellerData.DWMC}}</p>

              <!-- <span class="li_tit">供方：</span>
              <span>西安佰联网络技术有限公司</span>-->
            </li>
            <!-- <li style="width: 40%;">
              <span class="li_tit">合同编号：</span>
              <span>BBL2021-000011-HTD</span>
            </li>-->
            <li class="htdh_li" style="width: 40%">
              <p>合同编号：{{$parent.print_data.djbh}}</p>

              <!-- <span class="li_tit">需方：</span>
              <span>西安123</span>-->
            </li>

            <li></li>
          </ul>
        </div>
        <div class="table">
          <p class="tit_p">Ⅰ.采购项目规格</p>
          <table border="1">
            <thead>
              <tr>
                <th>行号</th>
                <th>商品名称</th>
                <th class="xh">规格</th>
                <th>材质</th>
                <th>数量</th>
                <th>含税单价</th>
                <th>总价</th>
                <th>货期</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, i) in $parent.print_data.htData" :key="i">
                <td>{{i+1}}</td>
                <td>{{item.SPBM}}</td>
                <td>{{item.xl}}</td>
                <td>{{item.CAILIAO}}</td>
                <td>{{item.num}}</td>
                <td>{{item.money}}</td>
                <td>￥{{(item.num*item.money).toFixed(2)}}</td>
                <td>{{item.YQFHRQ}}</td>
              </tr>
              <tr>
                <td colspan="8" class="fot_td">
                  <span>合计金额：￥ {{$parent.print_data.listdata.totalPrice}}</span>
                  <span>大写 金额：{{$parent.print_data.toChineseNumber}}</span>
                </td>
              </tr>
            </tbody>
          </table>
          <p class="bz_p">备注：合同中总金额含13%增值税。</p>
        </div>
        <div class="becareful">
          Ⅱ.按以下生效条款执行：
          <ul>
            <li>
              <p>1.价格</p>
            </li>
            <li>
              <p>2.付款方式</p>
              <p>2.1【付款方式】</p>

              <p>
                2.2买方应当按时向卖方支付货款，逾期支付的，每逾期一日，应当向卖方支付未付款项的千分之五作为违约金。
                同时，卖方有权中止履行本合同，并有权不再接受买方新的合同/订单，但买方不得以此为由拒收交付的
                货物。由该等延迟交货而导致的一切后果由买方承担（包括但不限于，卖方的该等延迟交货不得视为违约、产
                品剩余有效期缩短等）。
              </p>
            </li>
            <li>
              <p>3. 交货方式</p>
              <p>3.1【交货方式 】</p>
              <p>3.2自卖方交付货物于买方或买方指定的承运人之日起，风险转移至买方。</p>
              <p>3.3在买方向卖方支付货款前，货物的所有权归属于卖方。</p>
            </li>
            <li style="margin-bottom:155px">
              <p>4.交货地点/收货人</p>
              <p>4.1【交货地点】</p>
              <p>
                4.2 买方应指派专人（如采购、仓管、收货专员等）负责接收货物，买方在接收货物时应认真核对品名、型
                号、数量、包装、外观等是否无误及完好，买方确认无误及完好后应向卖方出具书面签收文件。货物一经买方
                书面签收/实际收货，即表示买方认可卖方交付给买方的货物符合本合同的规定及买方的要求。如买方在签收/
                实际收货后就前述事项提出异议的，卖方有权不予接受且不承担任何责任。买方对货物的质量有异议的，应于
                卖方交付货物后三个工作日内向卖方书面提出，逾期未提出的，视为货物符合本合同的规定及买方的要求。
              </p>
              <p>（条款未完，见下页）</p>
            </li>
            <li>
              <p class="htbh">合同编号：BBL2021-000011-HTD</p>
            </li>
            <li>
              <p>5.1【预计交货时间】</p>
              <p>4.1【交货地点】</p>
              <p>
                5.2 买方以任何其他方式要求变更交货时间、交货地点或其他变更需求的，必须事先经得卖方的书面同意。否
                则，卖方有权按照本合同的约定进行交货。如买方的变更需求造成卖方成本增加、交货期限延迟或产生其他费
                用的，均由买方承担。
              </p>
            </li>
            <li>
              <p>6.不可抗力</p>
              <p>
                双方均应谅解并不追究对方由于发生以下情形而产生的违约责任：地震、台风、水灾、火灾等自然灾害，战
                争、罢工、法令政策变动等社会现象，相关机构的因素(如海关及相关单位办理进出口手续等)，卖方供应商原
                因导致的本合同不能按约定履行，以及其他对方不可预见的、或对其发生后果不能防止或不可避免的事由，而
                引起的无法履行或迟延履行。
              </p>
            </li>
            <li>
              <p>
                7.保密一方对因本合同的履行而获知的另一方的商业机密、技术信息等，以及本合同内容和本合同签订过程中
                的一切细节信息均负有保密义务，不得向任何第三方泄露，但中国现行法律另有规定或经另一方书面同意的除
              </p>
            </li>
            <li>
              <p>8.争议解决</p>
              <p>
                关于此合同及其履行过程中所产生的争议应本着友好协商进行解决， 在不能达成共识时， 将提交仲裁解决。
                仲裁将由苏州仲裁委员会依据其规定和程序在苏州进行。仲裁用中文进行。仲裁委员会的裁决具有最终效力，
                对双方均有约束力。
              </p>
            </li>
            <li>
              <p>
                9.本合同一式两份, 合同签订后必须在五个工作日内签返，过期需重新核实。合同在买卖双方盖章签字后生效。
                本合同同未尽之事宜，双方可协议解决。
              </p>
            </li>
          </ul>
        </div>
        <div class="information">
          <div class="infor_ul">
            <p class="mf_p">
              <span class="tit_span">买方：</span>
              <span>{{$parent.print_data.buyerData.DWMC}}</span>
            </p>
            <p>
              <span class="tit_span">地址：</span>
              <span>{{$parent.print_data.buyerData.DWDZ}}</span>
            </p>
            <p>
              <span class="tit_span">开户银行：</span>
              <span>{{$parent.print_data.buyerData.KHH}}</span>
            </p>
            <p>
              <span class="tit_span">账号：</span>
              <span>{{$parent.print_data.buyerData.ZH}}</span>
            </p>
            <p>
              <span class="tit_span">日期：</span>
              <span>{{$parent.print_data.listdata.zdrq}}</span>
            </p>
          </div>
          <div class="infor_ul">
            <p class="mf_p">
              <span class="tit_span">卖方：</span>
              <span>{{$parent.print_data.sellerData.DWMC}}</span>
            </p>
            <p>
              <span class="tit_span">地址：</span>
              <span>{{$parent.print_data.sellerData.DWDZ}}</span>
            </p>
            <p>
              <span class="tit_span">开户银行：</span>
              <span>{{$parent.print_data.sellerData.KHH}}</span>
            </p>
            <p>
              <span class="tit_span">账号：</span>
              <span>{{$parent.print_data.sellerData.ZH}}</span>
            </p>
            <p>
              <span class="tit_span">日期：</span>
              <span>{{$parent.print_data.listdata.zdrq}}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="print_tk print_tk_two" v-if="print_key==2?true:false" id="printTest">
        <h1 class="hed_tit">{{$parent.print_data.listdata.dwmc}}</h1>
        <h2>购销合同</h2>
        <div class="print_top">
          <ul>
            <li>
              <p>供方：{{$parent.print_data.sellerData.DWMC}}</p>
              <p>需方：{{$parent.print_data.buyerData.DWMC}}</p>
            </li>
            <li>
              <p>签订地点：{{$parent.print_data.buyerData.DWDZ}}</p>
              <p>合同日期：{{$parent.print_data.listdata.zdrq}}</p>
            </li>
            <li>
              <p>合同编号：{{$parent.print_data.djbh}}</p>
            </li>
          </ul>
        </div>
        <div class="table">
          <p class="table_tit">产品名称、规格型号、数量、金额、供货时间</p>
          <table border="1">
            <thead>
              <tr>
                <th>序号</th>
                <th>产品名称</th>
                <th class="xh">型号规格</th>
                <th>品牌</th>
                <th>单位</th>
                <th>数量</th>
                <th>单价</th>
                <th>合计</th>
                <th>备注</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, i) in $parent.print_data.htData" :key="i">
                <td>{{i+1}}</td>
                <td>{{item.SPBM}}</td>
                <td>{{item.xl}}</td>
                <td>{{item.sccjc}}</td>
                <td>{{item.jldw}}</td>
                <td>{{item.num}}</td>
                <td>{{item.money}}</td>
                <td>￥{{(item.num*item.money).toFixed(2)}}</td>
                <td>{{item.mxbz}}</td>
              </tr>
              <tr>
                <td colspan="9" class="fot_td">
                  以上合计(小写): ￥
                  <span class="td_money">{{$parent.print_data.listdata.totalPrice}}</span>
                </td>
              </tr>
              <tr>
                <td colspan="9" class="fot_td">合计人民币金额(大写): {{$parent.print_data.toChineseNumber}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="becareful">
          <ul>
            <p>一、质量要求：按双方确定的定单内容中各品牌出厂质量标准。</p>
            <p>二、交（提）货地点、方式：</p>
            <p>三、验收标准、方法及提出异议期限：乙方收货后依据甲方发货单明细内容进行验收核对，最迟三天内未提出异议，视为验收合格。</p>
            <p>四、结算方式及期限：</p>
            <p>五、交货期：</p>
            <p>六、六、解决合同纠纷的方式：本合同在履行中过程中发生的争议，由双方当事人协商解决；也可由当地工商行政管理部门调解；协商或凋解不成的，可去供方当地法院起诉。</p>
            <p>七、其他约定事项：未得到对方允许，双方中任何一方不得将对方相关资料（包含供方所提供价格）告知第三方。</p>
            <p>八、本单备注：{{$parent.print_data.publicData.BZ}}</p>
          </ul>
        </div>
        <div class="cooperation">
          <table border="1">
            <thead>
              <tr>
                <th>供方</th>
                <th>需方</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>单位名称(章):{{$parent.print_data.sellerData.DWMC}}</td>
                <td>单位名称(章):{{$parent.print_data.buyerData.DWMC}}</td>
              </tr>
              <tr>
                <td>单位地址:{{$parent.print_data.sellerData.DWDZ}}</td>
                <td>单位地址:{{$parent.print_data.buyerData.DWDZ}}</td>
              </tr>
              <tr>
                <td>委托代理人:{{$parent.print_data.sellerData.DWDZ}}</td>
                <td>委托代理人:{{$parent.print_data.buyerData.DWDZ}}</td>
              </tr>
              <tr>
                <td>联系电话:{{$parent.print_data.sellerData.LXDH}}</td>
                <td>联系电话:{{$parent.print_data.buyerData.LXDH}}</td>
              </tr>
              <tr>
                <td>传真：{{$parent.print_data.sellerData.CZ}}</td>
                <td>传真：{{$parent.print_data.buyerData.CZ}}</td>
              </tr>
              <tr>
                <td>税务登记号:{{$parent.print_data.sellerData.SH}}</td>
                <td>税务登记号:{{$parent.print_data.buyerData.SH}}</td>
              </tr>
              <tr>
                <td>开户银行:{{$parent.print_data.sellerData.KHH}}</td>
                <td>开户银行:{{$parent.print_data.buyerData.KHH}}</td>
              </tr>
              <tr>
                <td>账号:{{$parent.print_data.sellerData.ZH}}</td>
                <td>账号:{{$parent.print_data.buyerData.ZH}}</td>
              </tr>
              <tr>
                <td>邮政编码:{{$parent.print_data.sellerData.YB}}</td>
                <td>邮政编码:{{$parent.print_data.buyerData.YB}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="print_tk print_tk_three" v-if="print_key==3?true:false" id="printTest">
        <h1 class="hed_tit">{{$parent.print_data.listdata.dwmc}}</h1>
        <h2>购销合同</h2>
        <div class="print_top">
          <ul>
            <li>
              <p>供方：{{$parent.print_data.sellerData.DWMC}}</p>
              <p>需方：{{$parent.print_data.buyerData.DWMC}}</p>
            </li>
            <li>
              <p>签订地点：{{$parent.print_data.buyerData.DWDZ}}</p>
              <p>合同日期：{{$parent.print_data.listdata.zdrq}}</p>
            </li>
            <li>
              <p>合同编号：{{$parent.print_data.djbh}}</p>
            </li>
          </ul>
        </div>
        <div class="table">
          <p class="table_tit">产品名称、规格型号、数量、金额、供货时间</p>
          <table border="1">
            <thead>
              <tr>
                <th>序号</th>
                <!-- <th>产品名称</th> -->
                <th class="xh">型号规格</th>
                <th>品牌</th>
                <th>单位</th>
                <th>数量</th>
                <th>含税单价</th>
                <th>金额</th>
                <th>备注</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, i) in $parent.print_data.htData" :key="i">
                <td>{{i+1}}</td>
                <!-- <td>无</td> -->
                <td>{{item.xl}}</td>
                <td>{{item.sccjc}}</td>
                <td>{{item.jldw}}</td>
                <td>{{item.num}}</td>
                <td>{{item.money}}</td>
                <td>￥{{(item.num*item.money).toFixed(2)}}</td>
                <td>{{item.mxbz}}</td>
              </tr>
              <tr>
                <td colspan="9" class="fot_td">
                  以上合计(小写): ￥
                  <span class="td_money">{{$parent.print_data.listdata.totalPrice}}</span>
                </td>
              </tr>
              <tr>
                <td colspan="9" class="fot_td">合计人民币金额(大写): {{$parent.print_data.toChineseNumber}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="becareful">
          <ul>
            <p>一、质量要求：按双方确定的定单内容中各品牌出厂质量标准。</p>
            <p>二、交（提）货地点、方式：</p>
            <p>三、验收标准、方法及提出异议期限：乙方收货后依据甲方发货单明细内容进行验收核对，最迟三天内未提出异议，视为验收合格。</p>
            <p>四、结算方式及期限：</p>
            <p>五、交货期：</p>
            <p>六、六、解决合同纠纷的方式：本合同在履行中过程中发生的争议，由双方当事人协商解决；也可由当地工商行政管理部门调解；协商或凋解不成的，可去供方当地法院起诉。</p>
            <p>七、其他约定事项：未得到对方允许，双方中任何一方不得将对方相关资料（包含供方所提供价格）告知第三方。</p>
            <p>八、本单备注：{{$parent.print_data.publicData.BZ}}</p>
          </ul>
        </div>
        <div class="cooperation">
          <table border="1">
            <thead>
              <tr>
                <th>供方</th>
                <th>需方</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>单位名称(章):{{$parent.print_data.sellerData.DWMC}}</td>
                <td>单位名称(章):{{$parent.print_data.buyerData.DWMC}}</td>
              </tr>
              <tr>
                <td>单位地址:{{$parent.print_data.sellerData.DWDZ}}</td>
                <td>单位地址:{{$parent.print_data.buyerData.DWDZ}}</td>
              </tr>
              <tr>
                <td>委托代理人:{{$parent.print_data.sellerData.DWDZ}}</td>
                <td>委托代理人:{{$parent.print_data.buyerData.DWDZ}}</td>
              </tr>
              <tr>
                <td>联系电话:{{$parent.print_data.sellerData.LXDH}}</td>
                <td>联系电话:{{$parent.print_data.buyerData.LXDH}}</td>
              </tr>
              <tr>
                <td>传真：{{$parent.print_data.sellerData.CZ}}</td>
                <td>传真：{{$parent.print_data.buyerData.CZ}}</td>
              </tr>
              <tr>
                <td>税务登记号:{{$parent.print_data.sellerData.SH}}</td>
                <td>税务登记号:{{$parent.print_data.buyerData.SH}}</td>
              </tr>
              <tr>
                <td>开户银行:{{$parent.print_data.sellerData.KHH}}</td>
                <td>开户银行:{{$parent.print_data.buyerData.KHH}}</td>
              </tr>
              <tr>
                <td>账号:{{$parent.print_data.sellerData.ZH}}</td>
                <td>账号:{{$parent.print_data.buyerData.ZH}}</td>
              </tr>
              <tr>
                <td>邮政编码:{{$parent.print_data.sellerData.YB}}</td>
                <td>邮政编码:{{$parent.print_data.buyerData.YB}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
export default {
  data() {
    return {
      printTest: {
        id: "#printTest",
        popTitle: " ",
        extraCss: "",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
      },
      print_key: 1,
      print_list: "",
      tableheight: ""
    };
  },

  methods: {
    callback(key) {
      console.log(key);
      this.print_key = key;
    },
    close() {
      this.$parent.print_flag = false;
    },
    tablechange(e) {
      console.log(e);
      // this.tableheight='overflow-y:scroll; height:200px!important;'
      console.log(this.tableheight);
    },
    tableheig() {
      // this.tableheight='overflow:none;height:auto!important'
      console.log(this.tableheight);
    },

    //title:下载的名称
    getpdf(title) {
      var pdfelement = document.getElementById("printTest");
      // var pdfelement = $("#printTest");

      console.log(pdfelement);
      setTimeout(() => {
        html2Canvas(pdfelement).then(function(canvas) {
          console.log(canvas);
          var contentWidth = canvas.width;
          var contentHeight = canvas.height;
          //一页pdf显示html页面生成的canvas高度;
          var pageHeight = (contentWidth / 592.28) * 841.89;
          //未生成pdf的html页面高度
          var leftHeight = contentHeight;
          console.log(leftHeight);
          //页面偏移
          var position = 0;
          //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
          var imgWidth = 595.28;
          var imgHeight = (592.28 / contentWidth) * contentHeight;
          var pageData = canvas.toDataURL("image/jpeg", 1.0);
          var pdf = new JsPDF("", "pt", "a4");
          //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
          //当内容未超过pdf一页显示的范围，无需分页
          if (leftHeight < pageHeight) {
            pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
          } else {
            while (leftHeight > 0) {
              pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
              leftHeight -= pageHeight;
              position -= 841.89;
              //避免添加空白页
              if (leftHeight > 0) {
                pdf.addPage();
              }
            }
          }
          pdf.save(title + ".pdf");
        });
      }, 0);
    }
  },

  created() {
    // this.print_list=this.$parent.print_data
    console.log(this.print_list);
  }
};
</script>


<style lang='less' scoped>
.print_box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1000px;
  background: rgba(0, 0, 0, 0.5);
  
  z-index: 999;
 
}

.print_box .print_tk_box {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  background: #fff;
  padding: 20px;
}

.hed_tit {
  text-align: center;
}
.print_top {
  width: 95%;
  margin: 0 auto;
}
.print_top ul li {
  display: inline-block !important;
  width: 49%;
  text-align: left;
  margin: 2px 0;
  color: #000;
}

.tit_li {
  display: inline-block;
  width: 65px;
  text-align: left;
  color: #000;
}

.print_tk table {
  border-color: #000 !important;
}

.print_tk th,
.print_tk td {
  border-color: #000 !important;
}

.print_tk tr {
  border-color: #000 !important;
}

.print_tk .footer {
  display: flex;
}

.close {
  cursor: pointer;
  z-index: 999;
}
.print_tk .ant-table-footer {
  padding: 0 !important;
}
.print_btn {
  position: absolute;
  right: 28px;
  top: 67px;
  z-index: 999;
  button {
    margin: 0 10px;
  }
}

.print_tk_box {
  overflow-y: scroll;
  height: 86%;
}
@media (max-width: 1600px) {
  .print_tk_box {
    overflow-y: scroll;
    height: 70%;
  }
}
.print_tk {
  h2 {
    text-align: center;
    font-weight: bold;
    letter-spacing: 10px;
  }
  .ul_one {
    margin: 0;
    li {
      vertical-align: top;
      p {
        margin: 5px 0;
      }
    }
    .htdh_li {
      text-align: right;
    }
  }
  .table {
    margin: 10px 0;
    // width: 100%;
    width: 95%;
    margin: 10px auto;
    // overflow-y: scroll;
    //     height: 300px;
    .tit_p {
      text-align: left;
      color: #000;
    }
    table {
      width: 100%;

      thead {
        tr {
          th {
            padding: 5px 0;
            text-align: center;
            color: #000;
          }
          .xh {
            width: 30%;
          }
        }
      }
      tbody {
        // overflow-y: scroll;
        // height: 200px;
        tr {
          td {
            padding: 8px 0;
            text-align: center;
            color: #000;
          }
          .fot_td {
            // display: flex;
            // justify-content: space-between;
            // width: 100%;
            span {
              width: 50%;
              display: inline-block;
              // text-align: left;
            }
          }
        }
      }
    }
    .bz_p {
      text-align: left;
      margin: 10px 0;
      color: #000;
    }
  }

  .footer {
    .left_num_tit {
      width: 12%;
      border-right: 1px solid #000;
      padding: 10px;
    }

    .left_num {
      width: 36.4%;
      border-right: 1px solid #000;
      padding: 10px;
    }

    .num_td {
      width: 11%;
      border-right: 1px solid #000;
      padding: 10px;
    }

    .bhsdj_td {
      width: 15%;
      border-right: 1px solid #000;
      padding: 10px;
    }

    .bhsje_td {
      width: 15%;
      border-right: 1px solid #000;
      padding: 10px;
    }

    .bz_td {
      width: 11%;
      /* border-right: 1px solid #000; */
      padding: 10px;
    }
  }

  .ant-table.ant-table-bordered .ant-table-footer {
    border-color: #000;
    border-top: 0;
    border-radius: 0;
  }

  .ant-table-footer::before {
    top: 0 !important;
    height: 0px !important;
  }
  .ant-table-thead > tr > th {
    padding: 5px 16px !important;
  }
  .ant-table-tbody > tr > td {
    padding: 8px 16px !important;
  }
  .becareful {
    text-align: left;
    padding: 20px 0;
    color: #000;
    width: 95%;
    margin: 0 auto;
    ul {
      text-align: left;
      li {
        margin: 5px 0;
        p {
          margin: 5px 0;
          color: #000;
          line-height: 25px;
        }
        .htbh {
          text-align: right;
          // margin-top: 150px;
        }
      }
      .becareful_fot {
        width: 80%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 30px auto;
        padding-right: 100px;
      }
    }
  }
  .information {
    // margin-bottom: 100px;
    width: 95%;
    margin: 0 auto;
    .infor_ul {
      display: inline-block;
      width: 49%;
      vertical-align: top;
      text-align: left;
      // line-height: 25px;
      p {
        color: #000;
        .tit_span {
          display: inline-block;
          // max-width: 100px;
          text-align: left;
        }
      }
      .mf_p {
        color: #000;
        font-weight: bold;
      }
    }
  }
}

.print_tk_one {
  .hed_tit {
    font-size: 19px;
    text-align: left;
    font-style: italic;
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 60px;
  }
  .tit_li {
    display: inline-block;
    width: 73px;
    text-align: left;
    color: #000;
  }

  // .ul_one{
  //   width: 49%;
  //   display: inline-block;
  //   li{
  //     width: 100%;
  //   }
  // }
  // .ul_two{
  //   width: 49%;
  //   display: inline-block;
  //   vertical-align: top;
  //   margin-top: 40px;
  //   li{
  //     width: 100%;
  //   }
  // }
  .table {
    table {
      thead {
        tr {
          border-top: 1px dotted #ccc;
          th {
          }
        }
      }
      tbody {
        tr {
          border-top: 1px dotted #ccc;

          td {
            p {
              text-align: left;
              display: flex;
              justify-content: space-between;
            }
          }
        }
      }
    }
  }
}
.print_tk_two {
  h1,
  h2 {
    text-align: center;
  }
  h2 {
    font-weight: bold;
  }
  .print_top {
    ul {
      li {
        display: inline-block;
        width: 33%;
        vertical-align: top;
      }
    }
  }
  .table {
    .table_tit {
      text-align: left;
      margin: 0;
      padding-left: 15px;
      color: #000;
    }
    table {
      tbody {
        tr {
          td {
          }
          .td_money {
            text-decoration: underline;
            display: inline-block;
            width: 150px !important;
          }
          .fot_td {
            text-align: left;
            padding: 8px 20px;
          }
        }
      }
    }
  }
  .becareful {
    width: 95%;
    margin: 0 auto;
    p {
      margin: 5px 0;
    }
  }
  .cooperation {
    width: 95%;
    margin: 0 auto;
    table {
      width: 100%;
      thead {
        tr {
          th {
            padding: 5px 0;
            color: #000;
          }
        }
      }
      tbody {
        tr {
          td {
            padding: 5px 0;
            color: #000;
            text-align: left;
            padding-left: 10px;
          }
        }
      }
    }
  }
}
.print_tk_three {
  h1,
  h2 {
    text-align: center;
  }
  h2 {
    font-weight: bold;
  }
  .print_top {
    ul {
      li {
        display: inline-block;
        width: 33%;
        vertical-align: top;
      }
    }
  }
  .table {
    // margin: 10px;
    .table_tit {
      text-align: left;
      margin: 0;
      padding-left: 15px;
      color: #000;
    }
    table {
      width: 100%;
      thead {
        tr {
          th {
            padding: 5px 0;
            text-align: center;
            color: #000;
          }
          .xh {
            width: 30%;
          }
        }
      }
      tbody {
        tr {
          border-bottom: 1px solid #000;
          td {
            padding: 8px 0;
            text-align: center;
            color: #000;
          }
          .td_money {
            text-decoration: underline;
            display: inline-block;
            width: 150px !important;
          }
          .fot_td {
            text-align: left;
            padding: 8px 20px;
          }
        }
      }
    }
  }
  .becareful{
    p{
      margin: 5px 0;
    }
  }
  .cooperation {
    width: 95%;
    margin: 0 auto;
    table {
      width: 100%;
      thead {
        tr {
          th {
            padding: 5px 0;
            color: #000;
          }
        }
      }
      tbody {
        tr {
          td {
            padding: 5px 0;
            color: #000;
            text-align: left;
            padding-left: 10px;
          }
        }
      }
    }
  }
}
</style>
